<template>
    <el-select
        v-model="value"
        placeholder="请选择图标"
        popper-class="w-600"
        clearable
        filterable
    >
        <template #label="{ label, value }">
            <div style="display: flex; align-items: center">
                <el-icon class="mr-5">
                    <component :is="value" />
                </el-icon>
                <span>{{ value }}</span>
            </div>
        </template>
        <el-option
            v-for="item in icons"
            :key="item"
            :label="item"
            :value="item"
            class="w-33.33% inline-block"
        >
            <div style="display: flex; align-items: center">
                <el-icon class="mr-5">
                    <component :is="item" />
                </el-icon>
                <span>{{ item }}</span>
            </div>
        </el-option>
    </el-select>
</template>

<script setup>
import { ref } from "vue";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
const icons = Object.keys(ElementPlusIconsVue);
const value = ref(null);
</script>
